<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>注册</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="js/share.js"></script>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
  <style type="text/css">
    html{
      height:100%;
    }
    body{
      background: url("img/bg1.jpg") no-repeat top rgb(195, 247, 245);
      background-size: cover;/* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
    }
    .cover{
      position:absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
     display: none;
    }
    .container{
      width: 720px;
      height: 670px;
      min-height:470px;
      max-height:520px;
	  min-width: 500px;
      position: absolute;
      top: 23px;
      left: -17px;
      bottom: 0;
      right: 0;
      margin: auto;
      padding: 20px;
      z-index: 130;
      border-radius: 8px;
      box-shadow: 0 3px 18px rgba(28, 19, 19, 0.5);
      font-size: 16px;
      background: rgba(234,255,220,0.4);
    }
	.layui-form-item{
		margin: 20px 0px;
	}
    .layui-input{
            border-radius: 5px;
            height: 40px;
            font-size: 15px;
    }
    .layui-form-label{
      width: 60px;
    }
    .font-set{
      font-size: 13px;
      text-decoration: none;
      position:relative;
      left: 230px;
    }
    a:hover{
      text-decoration: underline;
    }
    .mydiv{
      margin-top:20px;
      margin-left: 90px;
    }
  </style>
</head>
<body>
<!--<form class="layui-form" action="" method="post">-->
  <div class="container" id="app">
    <div class="layui-form-item">
      <div class="layui-inline" >
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-inline" style="width: 100px">
          <input v-model="user.name" type="text" name="name" lay-verify="required|name" autocomplete="off" class="layui-input" placeholder="仅限中文">
        </div>
        <div class="layui-inline" style="width: 225px">
          <label class="layui-form-label" style="width: 65px">昵称：</label>
          <div class="layui-input-inline" style="width: 120px">
            <input type="text" name="username" lay-verify="required" autocomplete="off" class="accountNum layui-input" style="width:120px;">
          </div>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-inline" style="width: 110px">
          <select name="sex" lay-verify="required">
            <option value="">选择性别</option>
            <option value="0">女</option>
            <option value="1">男</option>
          </select>
        </div>
      </div>
    </div>

    <div class="layui-form-item">
		  <label class="layui-form-label">生日：</label>
		  <div class="layui-input-inline" style="width: 100px;">
		    <input type="text"  class="layui-input" name="birthday" id="birthday" placeholder="yyyy-MM-dd">
		  </div>
		<div class="layui-inline" style="width: 260px;">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-inline" style="width: 160px">
          <input  type="text" name="email" lay-verify="email|required" autocomplete="off" class="layui-input" placeholder="请输入邮箱">
        </div>
		</div>
    </div>

    <div class="layui-form-item">
        <form method="post" action="#">
              <label class="layui-form-label">住址：</label>
           <!-- <template>
                <el-select v-model="value" placeholder="请选择" >
                    <el-option
                            v-for="i in pArray"
                            :key="i.id"
                            :label="i.name"
                            :value="i.id">
                    </el-option>
                </el-select>
            </template>-->
              <input style="height: 30px;width: 100px"  type="text" v-model="user.provinceName" placeholder="省" list="typelist"  />
                <datalist id="typelist" v-for="p in pArray"  >
                <option>{{p.name}}</option>
              </datalist>
              <input style="height: 30px;width: 100px" type="text" v-model="user.district" placeholder="市" list="typelist"/>
              <datalist id="typelist1" >
                <option></option>
              </datalist>
              <input style="height: 30px;width: 100px" type="text" v-model="user.community" placeholder="区" list="typelist"/>
              <datalist id="typelist2" >
                <option></option>
              </datalist><br><br>

           <div class="mydiv">
              <input style="width: 290px;height: 40px" v-model="user.locationDetails" type="text"
                 class="text" placeholder="详细地址">
          </div>
        </form>
    </div>
    <div class="layui-form-item" style="position: relative;left: -5px;">
      <div class="layui-inline" style="width: 225px">
        <div class="layui-input-inline" style="width: 120px">
        </div>
      </div>
    </div>
    <div class="layui-form-item" style="width: 490px">
      <div class="layui-inline " style="width:  220px;">
        <div class="layui-input-inline" style="width: 100px">
			<span class="tip1"></span>
        </div>
      </div>
      <div class="layui-inline" style="width: 220px;">
        <div class="layui-input-inline" oninput="OnInput (event)" style="width: 100px">
		</div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button @click="send()" class="layui-btn  layui-icon layui-btn-normal layui-icon-username" lay-submit lay-filter="register">立即注册</button>
		 <a href="login.html" class="font-set" style="font-weight:bold;font-size:1rem;position: relative; left:50px;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;返回登陆</a>
      </div>
    </div>
    <input type="button" @onclick="manyValues()"/>
  </div>
<!--</form>-->
<script src="js/vue.js"></script>
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
  layui.use(['form', 'layedit', 'laydate','layer'], function() {
    var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,layer=layui.layer;
    laydate.render({
      elem: '#birthday'
    });
	form.on('submit(register)', function(data){
		$.ajax({
			url:"http://localhost:8085/user/register",
			method:'POST',
			contentType: 'application/json',
			async:false,
			data:JSON.stringify(data.field),
			success: function(res) {
						  layer.alert(res.msg, {
							end: function() {
							  if (res.code == 200) location.href = 'login.html';
							}
						  })
						}
		})
		return false;
	});
  });
</script>
<script>
/*    function manyValues() {
        var url=decodeURI(window.location.search);
        if(url.indexOf("?")!=-1) {
            var str = url.substr(1);
            strs = str.split("&");
            var key = new Array(strs.length);
            var value = new Array(strs.length);
            for(i = 0;i < strs.length;i++){
                key[i] = strs[i].split("=")[0]
                value[i] = unescape(strs[i].split("=")[1]);
                alert(key[i]+"="+value[i]);
            }
        }
    }
    manyValues();*/

    let number;
    let password;
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user:{
                    userName:'李一',
                    phone: '',
                    provinceName:'',
                    password:'',
                    district:'',
                    community:'',
                    locationDetails:'',
                    Cityname:'临翔区'
                },
                pArray:[]
            }
        },
        created:function () {
          console.log("1111111111111")
            let url = location.search;
          console.log(url);
            let theRequest = new Object();
            if (url.indexOf("?") != -1) {
                let str = url.substr(1);
                strs = str.split("&");
                for (let i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                }
            }
            //第一个cid是你要得到的值随便取的名字
            //theRequest.cid  cid是路径后面的参数名
             number = theRequest.number;
            // 第二个参数 正常获取就行
             password = theRequest.password;
            console.log(theRequest.number);
            console.log(password);

          axios.get("/api.location/getProvince").then(function (response) {
            console.log(response.data.data);
            v.pArray = response.data.data;
            console.log(v.pArray[1].name);
          })
        },
       /* created:function (){
            axios.get("/api.location/getProvince").then(function (response) {
                console.log(response.data.data);
                v.pArray = response.data.data;
                console.log(v.pArray[1].name);
            })
        },*/
        methods:{
            send(){
                v.user.phone = number;
                v.user.password = password;
                console.log(v.user.Cityname);
                console.log(v.user.phone);
                console.log(v.user.password);
                axios.put("/user/signUp",v.user).then(function (response) {
                    console.log("2222222")
                        console.log(response.data);
                })
            },
            prin(){

            }
        }
    })
</script>
</body>
</html>
